Bootstrap Snippet responcive stylish Pricing Table using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Pricing Table</h2>
    </div>
</div>
<section class="subsceribe">
<div class="container">
<div class="col-md-12 title_offer">
<h2>SPECIAL OFFER FOR YOU</h2>
 <!--<a href="#"> <button class="see-all">More</button></a>-->
</div> <!--col-md-12 title_name close-->
<br>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="offer">
<div class="price">
<h4>2 Videos</h4>
</div><!--price close-->
<div class="price2">
<p>$20 - 3days</p>
<h6><a href="#">Subscribe</a></h6>
</div><!--price2 close-->
</div><!--offer close-->
</div><!--col-md-3 close-->
<div class="col-md-3 col-sm-3 col-xs-6">
<div class="offer">
<div class="price">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*subsceribe css*/
body {background-color:#978d8d; }
.subsceribe { padding:5px 5px; background:#;}
.title_offer {float: left;width: 100%;border: 1px solid #8e0222;padding: 10px 20px;margin: 0px 0px 10px 0px;}
.title_offer h2{font-size:17px;color: #8e0222; text-transform:uppercase; text-align:center;margin:0px;padding: 5px;}
.title_offer a { color:#fff;float: right;}
.offer { float:left; width:100%; min-height:230px; background:transparent;margin-bottom: 25px;}
.price{height: 100px;width: 100%;float: left;border-top-right-radius: 20px;border-top-left-radius: 20px;
background: rgba(169,3,41,1);
background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(169,3,41,1)), color-stop(44%, rgba(143,2,34,1)), color-stop(100%, rgba(109,0,25,1)));
background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -o-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: linear-gradient(to right, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019', GradientType=1 );;
}
.price h4{height:75px;text-align: center;padding:10px 5px;font-size:15px;color:#71011a; background:#fff;text-transform: uppercase;
border:5px double #fd0941;width:75px;margin: 10px auto;border-radius: 100%;box-shadow: 0px 0px 10px 4px rgba(253, 9, 65, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(253, 9, 65, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(253, 9, 65, 0.75);}
.price2 { background:#fff;float: left;width: 100%;}
.offer p {color:#71011a;text-align: center;text-transform: uppercase;font-size: 16px;padding: 5px;float: left;width: 100%;font-weight: 600;
 margin: 25px 0px 5px 0px;}
.offer h6 {float: left;width: 100%;text-align: center;height: 45px;background:; padding:15px 0px;}
.offer h6 a{font-size: 13px;border: 1px solid #71011a;padding: 5px 10px;background:#71011a;color: #fff;text-transform: uppercase;}
.offer h6 a:hover { text-decoration:none; background:#a40228;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"responcive stylish Pricing Table"
Bootstrap 3.3.0 Snippet by Gurmeet Singh

Related: See More

Questions / Comments:

"responcive stylish Pricing Table" Bootstrap 3.3.0 Snippet by Gurmeet Singh

Related: See More

Questions / Comments:

"responcive stylish Pricing Table"
Bootstrap 3.3.0 Snippet by Gurmeet Singh